<template>
	<view :style="skin" class="leasing">
		<view class="overdueList" v-for="item in leasingList" :key="item.leaseId">
			<view class="overdueListLeft">
				<u--image shape="circle" :src="item.avatar" width="75px" height="75px"></u--image>
				<block>
					<view class="leftTips">
						ID:{{item.customerAccount}}
					</view>
					<view class="leftTips">
						{{$t('lease.rentalTimes')}}:{{item.rentNum}}
					</view>
					<!-- <view class="leftTips">
						用户积分:100
					</view> -->
				</block>

			</view>
			<view class="overdueListRight">
				<view class="rightTips">
					{{$t('lease.productModel')}}: {{item.productModel}}
				</view>
				<view class="rightTips">
					{{$t('lease.productID')}}: {{item.productId}}
				</view>
				<view class="rightTips">
					Rental Day: {{item.leaseDay}} D
				</view>
				<view class="rightTips">
					Rental Date: {{setTime(item.leaseId)}}
				</view>
				<view class="rightTips">
					{{$t('lease.name')}}: {{item.nickname}}
				</view>
				<view class="rightTips">
					{{$t('lease.phone')}}: {{item.phone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight" @click="handleCall(item.phone)"></text>
				</view>
				<view class="rightTips">
					{{$t('lease.address')}}: {{item.userAddress}}
				</view>
				<view class="rightTips">
					{{$t('lease.surety')}}: {{item.bondsMan}}
				</view>
				<view class="rightTips">
					{{$t('lease.suretyPhone')}}: {{item.bondsManPhone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight" @click="handleCall(item.bondsManPhone)"></text>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		formatDateTime
	} from '@/utils/index.js'
	export default {
		props: {
			leasingList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				src: '',
				list: []
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		mounted() {


		},

		methods: {
			setTime(num) {
				const date = new Date(parseInt(num));
				return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;


			},
			handleCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //要拨打的手机号
					success: (res) => {
						console.log("调用成功")
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				})
			},
		},
		// watch: {
		// 	leasingList: {
		// 		handle(newVal, oldVal) {
		// 			console.log(newVal, '新的值');
		// 		},
		// 		immediate: true
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.leasing {
		padding: 16px;
		box-sizing: border-box;
		height: 100%;
		overflow-y: auto;

		.overdueList {
			width: 100%;
			padding: 16px 0;
			box-sizing: border-box;
			height: 244px;
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			margin-bottom: 16px;

			.overdueListLeft {
				width: 102px;
				height: calc(100% - 16px);
				margin-top: 8px;
				border-right: 1px solid #ccc;
				display: flex;
				font-size: 14px;
				flex-direction: column;
				align-items: center;

				.leftTips {
					width: 96px;

				}
			}

			.overdueListRight {
				font-size: 14px;
				color: #101010;
				padding-left: 16px;
				box-sizing: border-box;

				.rightTips {
					line-height: 22px;

					.iconRight {
						float: right;
					}
				}
			}
		}
	}
</style>